<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酒店民宿</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.center {
				width: 1000px;
				margin: 0 auto;
			}
			ul {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			body {
				background-color: #F4F4F4;
			}
			/**************搜索区****************/
			.search .btn-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				width: 100%;
				height: 80px;
				box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
			}
			.search .btn-search h3 {
				color: #555;
				font-size: 30px;
				margin-left: 10px;
				font-family: '华文彩云';
			}
			.search .btn-search input {
				width: 300px;
				padding: 5px;
				outline: none;
			}
			.search .btn-search button {
				height: 30px;
				width: 60px;
				border: 0;
				margin-right: 10px;
			}
			.search .main {
				background-color: #fff;
				padding: 5px 10px;
				margin-top: 10px;
				color: #2F2F2F;
				box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
			}
			.search .hotel-type {
				display: flex;
				margin: 10px;
			}
			.search .hotel-type span {
				width: 100px;
				font-size: 14px;
			}
			.search .hotel-type a {
				width: 100px;
				color: #2F2F2F;
				font-size: 14px;
			}
			
			/****************酒店展示区******************/
			.hotel-list .number {
				outline: none;
				padding: 10px;
				width: 200px;
				margin-top: 10px;
				border: 0;
			}
			.hotel-list ul {
				width: 100%;
				height: 600px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: space-evenly;
			}
			.hotel-list ul li {
				width: 230px;
				height: 280px;
				border: 1px solid #aaa;
				background-color: #fff;
			}
			.hotel-list ul li img {
				display: block;
				width: 100%;
			}
			.hotel-list ul li a {
				display: block;
				margin: 10px 0;
				padding: 5px;
				font-size: 14px;
			}
			.hotel-list ul li h4 {
				font-size: 24px;
				color: #555;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		<div class="search">
			<div class="center">
				<div class="btn-search">
					<h3>酒店民宿</h3>
					<div>
						<input type="text" placeholder="请输入地名关键词">
						<button>搜索</button>
					</div>
				</div>
				<div class="main">
					<div class="hotel-type">
						<span>酒店类型：</span>
						<a href="#">不限</a>
						<a href="#">酒店住宿</a>
						<a href="#">渔农家乐</a>
						<a href="#">东海人家</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 酒店详情 -->
		<div class="hotel-list">
			<div class="center">
				<select name="" id="" class="number">
					<option value="5">每页显示5条数据</option>
					<option value="10">每页显示10条数据</option>
					<option value="15">每页显示15条数据</option>
					<option value="25">每页显示20条数据</option>
				</select>
				<ul>
					<li>
						<img src="img/hotel/1.jpg">
						<a href="hotel_show.html" target="_blank">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/2.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/3.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/4.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/5.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/6.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/1.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
					<li>
						<img src="img/hotel/1.jpg">
						<a href="#">舟山喜来登绿城酒店</a>
						<h4>￥160</h4>
					</li>
				</ul>
			</div>
		</div>
		<div class="foot">
				<iframe src="foot.html" frameborder="0" width="100%" scrolling="no" height="300px"></iframe>
		</div>
	</body>
</html>
